<template>
  <div class="mainBg">
    <!-- <div class="tit">
      <h1>穿戴校徽新科技</h1>
      <h4>智慧校星登录页-欢迎您的使用</h4>
    </div> -->
    <div class="mainlogin">
      <div class="mainInner">
        <h5>智慧校星登录框</h5>
        <div class="tis">- 填写 -</div>
        <div class="gwrp">
          <input id="user" type="text" placeholder="请输入学校账号" v-model="user_name">
        </div>
        <div class="gwrp">
          <input id="passwd" type="password" placeholder="请输入密码" v-model="passwd">
        </div>
        <div class="btnwrp clear">
          <div class="rembwrp fl" @click="rembFuc">
            <label>
              <span v-if="rember" class="radus on"></span>
              <span v-else class="radus"></span>记住密码
            </label>
          </div>
          <button class="fr" @click="infuc">确定登录</button>
        </div>
      </div>
      <div class="btpad"></div>
    </div>
  </div>
</template>

<script>
import md5 from '@/md5'
import pubs from '@/pubs'
export default {
  data () {
    return {
      rember: false,
      user_name: '',
      passwd: ''
    }
  },
  created () {
    let now = Date.now()
    let nowStr = String(now).substr(0, 10)
    let exp_time = localStorage.getItem('exp_time')
    // if (exp_time && Number(nowStr) > Number(exp_time)) {

    // }
    if (localStorage.getItem('rember') == 'true') {
      this.rember = true
      if (
        localStorage.getItem('username') &&
        localStorage.getItem('password')
      ) {
        this.user_name = localStorage.getItem('username')
        this.passwd = localStorage.getItem('password')
      }
    } else {
      this.rember = false
    }
  },
  methods: {
    rembFuc () {
      this.rember = !this.rember
      if (this.rember) {
        localStorage.setItem('rember', true)
      } else {
        localStorage.setItem('rember', false)
      }
    },
    infuc () {
      const _this = this
      if (_this.passwd == '' || _this.user_name == '') {
        alert('请填写您的账号或密码！')
        return false
      }
      pubs.reqs(
        '/nameLogin',
        'POST',
        {
          username: _this.user_name,
          password: md5.md5(_this.passwd)
        },
        function (data) {
          // console.log(data);
          if (_this.rember) {
            localStorage.setItem('rember', true)
            localStorage.setItem('username', _this.user_name)
            localStorage.setItem('password', _this.passwd)
          }
          localStorage.setItem('token', data.access_token)
          localStorage.setItem(
            'Authorization',
            data.type + ' ' + data.access_token
          )
          localStorage.setItem('exp_time', data.exp_time)
          _this.$router.push('/home')
        },
        _this
      )
    }
  }
}
</script>

<style scoped>
.mainBg {
  height: 100%;
  width: 100%;
  background: url("../assets/Background.png") no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.mainlogin {
  background-color: #fff;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 500px;
  box-shadow: 0 0 12px #ccc;
}

.mainInner {
  padding: 20px;
}

.mainlogin h5 {
  font-size: 15px;
  margin-top: 40px;
  border-radius: 4px;
  text-align: center;
  font-weight: normal;
  line-height: 50px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  color: #fff;
  background: linear-gradient(
    305deg,
    rgba(0, 126, 229, 1) 0%,
    rgba(5, 179, 255, 1) 100%
  );
}
.tit {
  position: absolute;
  top: 27%;
  left: 17%;
  color: #fff;
}
.radus {
  display: inline-block;
  height: 17px;
  width: 17px;
  position: relative;
  top: 3px;
  margin-right: 5px;
  border-radius: 50%;
  border: 1px solid #dedede;
}
.radus.on {
  background-image: url("../assets/check.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #f94745;
  border-color: #f94745;
}
.btpad {
  height: 60px;
  background-color: #fbfcfd;
}

.tis {
  text-align: center;
  font-size: 13px;
  color: #d2d2d2;
}

.rembwrp {
  margin-top: 15px;
  font-size: 13px;
  width: 200px;
  color: #585858;
}
.rembwrp label {
  cursor: pointer;
}

.gwrp {
  margin: 20px 0;
  height: 50px;
  line-height: 50px;
  background-color: #fcfdfd;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.gwrp label {
  display: inline-block;
  width: 80px;
}

.gwrp input {
  display: inline-block;
  font-size: 15px;
  padding-left: 6px;
  border: none;
  outline: none;
  background: none;
  height: 40px;
  line-height: 40px;
  width: 100%;
}

.gwrp ::-webkit-input-placeholder {
  color: #c6c7c7;
}

.mainlogin button {
  cursor: pointer;
  width: 220px;
  height: 40px;
  display: block;
  outline: none;
  background: none;
  border: none;
  background: linear-gradient(
    302deg,
    rgba(0, 126, 229, 1) 0%,
    rgba(5, 160, 255, 1) 100%,
    rgba(85, 51, 255, 1) 100%
  );
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  border-radius: 4px;
  margin: 10px auto;
}
.mainlogin button:active {
  opacity: 0.7;
}
</style>
